<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel='stylesheet' type='text/css' href='../css/Inicio.css' />
    <link rel='stylesheet' type='text/css' href='../css/redmond/jquery-ui-1.8.12.custom.css' />
    <script type='text/javascript' src='../js/jquery-1.5.1.min.js'></script>
    <script type='text/javascript' src='../js/jquery-ui-1.8.12.custom.min.js'></script>
    <title>Bienvenido a W-Calendar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script language="javascript">
        
     
 $(document).ready(function(){
     
    $("#Bnuevo").hover(function(){
        $("#Bnuevo img")
            // first jump
            .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200)
            // second jump
            .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100)
            // the last jump
            .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100);
    });
    $("#Bentrar").hover(function(){
        $("#Bentrar img")
            // first jump
            .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200)
            // second jump
            .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100)
            // the last jump
            .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100);
    });
 });
 $(function() {
    var nombre = $( "#Nombre" ),
        apellido= $( "#Apellido" ),
	email = $( "#email" ),
	password = $( "#password" ),
        password2 = $( "#password2" ),
        sexo = $( "#Sexo" ),
	allFields = $( [] ).add( nombre ).add( apellido ).add( email ).add( password ).add( password2 ),
	tips = $( ".validateTips" ); 
        
    function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
                
    function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "El " + n + " debe tener entre " +
					min + " y " + max + " caracteres." );
				return false;
			} else {
				return true;
			}
		}
     function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
       function checkClaves( a,b ) {
           if ( a.val() != b.val()) {
				a.addClass( "ui-state-error" );
                                b.addClass( "ui-state-error" );
				updateTips( "Las Claves no son iguales" );
				return false;
			} else {
				return true;
			}
		}
          $("#dialog-form").css("visibility","visible");      
    $( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 500,
			width: 400,
			modal: true,
                   	buttons: {
				"Crear": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( nombre, "Nombre", 3, 45 );
                                        bValid = bValid && checkLength( apellido, "Apellido", 3, 45 );
					bValid = bValid && checkLength( email, "Correo Electronico", 6, 80 );
					bValid = bValid && checkLength( password, "Clave", 6, 11 );

					//bValid = bValid && checkRegexp( nombre, /^[a-z]([0-9a-z_])+$/i, "El nombre solo puede tener a-z, 0-9, _ , debe comenzar con una letra." );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Correo Invalido" );
					bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "La clave solo puede tener: a-z 0-9" );
                                        bValid = bValid && checkClaves(password,password2);
					if ( bValid ) {
						$.post("../Controlador/crear_usuario.php",{correo:email.val(),clave:password.val(),nombre:nombre.val(),apellido:apellido.val(),sexo:sexo.val()},function(data){
                                                    $( "#mostrar" ).html(data);
                                                    $( "#mostrar" ).dialog( "open" );
                                                });
          
						$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
                                updateTips( "Ningún dato es opcional." );
			}
		});
});
    $(function() {
		$( ".Bonton" ).button();
                 $( "#mostrar" ).dialog({
                     autoOpen: false,
                     buttons: {
                         OK: function() {
					$( this ).dialog( "close" );
				}
                         
                     },
                     modal: true
                 });
    });
    function login(){
        email = $( "#Usuario" );
        password = $( "#Clave" );
        $.post("../Controlador/login.php",{correo:email.val(),clave:password.val()}, function(data){
           if (data == 1){
               $(location).attr("href","Calendario.php");
           }else{

                $( "#mostrar" ).html(data);
                $( "#mostrar" ).dialog( "open" );
           } 
            
        });
    }
    </script>
  </head>
  <body>

      <table id="core" width="100%" border="0" cellspacing="0">
          <tr>
              <td height="100px" id="MargenUp">


              </td>
          </tr>
          <tr>
              <td id="Imagen" align="center" >
                  <img src="../Imagenes/Portada.png" alt="Bienvenido a W-Calendar">

              </td>
          </tr>
          <tr>
              <td valign="middle" align="center">
                  <label>Correo: </label><input id="Usuario" size="30" type="text">
                  <label>Clave: </label><input id="Clave" type="password" size="20"> <a onclick="login()" class="button" href="#" id="Bentrar">
                      <img src="../Imagenes/Check-32.png" alt="" />Entrar</a><a onclick="$( '#dialog-form').dialog( 'open' );" class="button" href="#" id="Bnuevo">
                      <img src="../Imagenes/Add-32.png" alt="" />Nuevo Usuario</a>
                  
              </td>
         </tr>
         <tr valign="middle" align="center">
             <td style="height: 30px;" ><a href="Recuperar1.html" id="Olvido">¿Olvidó su contraseña?</a></td>
         </tr>


      </table>
      <div id="dialog-form" title="Crear Nuevo Usuario">
	<p class="validateTips">Ningún dato es opcional.</p>

	<form>
            <fieldset>
                    <label for="Nombre">Nombre</label>
                    <input type="text" name="Nombre" id="Nombre" class="text ui-widget-content ui-corner-all"/>
                    <label for="Nombre">Apellido</label>
                    <input type="text" name="Apellido" id="Apellido" class="text ui-widget-content ui-corner-all"/>
                    <label for="email">Correo Electronico</label>
                    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="password">Clave</label>
                    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="password2">Repetir Clave</label>
                    <input type="password" name="password2" id="password2" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="Sexo">Sexo</label>
                    <select id="Sexo" name="Sexo" class="text ui-widget-content ui-corner-all">
                        <option value="F">Mujer</option>
                        <option value="M">Hombre</option>
                    </select>
            </fieldset>
	</form>
      </div> 
      <span style="color: #ff9a1e;"></span>
  </body>
  <div id="mostrar" title="W-Calendar dice:"></div>
</html>
